<template>
<div>
              <ProTable
                :data="tableData"
                :column="column"
                :elProps="elProps"
                :page="[]"
                :rowControl="[]"
                :disabled="[]"
                :controlWidth="{
                        name:100,
                        num:180,
                        price:130,
                        discount_id:130,
                        discount_price:130,
                        total_prices:100
                }"
                ref="table"
              >
                    <template #expand>
                              <el-table-column  type="expand" >
                                  <template #default="scope">
                                        <el-table border size="small" :row-class-name="tableRowClassNameB" :data="scope.row.class">
                                          <el-table-column prop="date" align="center" :show-overflow-tooltip="true" label="日期"></el-table-column>
                                          <el-table-column prop="time1" align="center" :show-overflow-tooltip="true" label="時間"></el-table-column>
                                          <el-table-column prop="room" align="center" :show-overflow-tooltip="true" label="教室"></el-table-column>
                                          <el-table-column prop="name" align="center" :show-overflow-tooltip="true" label="教師"></el-table-column>
                                          <!-- <el-table-column prop="number" align="center" :show-overflow-tooltip="true" label="人數"></el-table-column> -->
                                          <el-table-column prop="status" align="center" :show-overflow-tooltip="true" label="狀態"></el-table-column>
                                          <el-table-column label="操作" width="100" align="center" fixed="right">
                                            <template #default="cscope">
                                              <el-popconfirm confirm-button-text="確認" title="確認刪除該數據？"
                                                @confirm="delSign(scope.$index,cscope.$index)">
                                                  <template #reference>
                                                <el-button type="danger" icon="Delete"  circle  ></el-button >
                                                  </template>
                                              </el-popconfirm>
                                            </template>
                                          </el-table-column>
                                        </el-table>
                                  </template>
                                </el-table-column>
                    </template>
                    <template #default="{propname,row,index}">
                      <div v-if="propname == 'num'" >
                        <el-input-number v-model="row[propname]" :min="1" @change="handlerInput({key:'num',val:row[propname],index:index})"></el-input-number>
                      </div>
                      <div v-if="propname === 'price'">
                        <el-input v-model="row[propname]" :min="1" type="number" @change="handlerInput({key:'price',val:row[propname],index:index})"></el-input>
                      </div>
                      <div v-if="propname === 'discount_id'">
                        <div class="flex items-center">
                           <el-select v-model="row[propname]" clearable @change="handlerSelect({key:'discount_id',val:row[propname],index:index})" >
                              <el-option
                                v-for="item in discountList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                              />
                            </el-select>
                            <div class="flex items-center">{{row[propname] != 0 ?row[propname]*10 + '%' : ''}}</div>
                        </div>
                      </div>
                      <div v-if="propname === 'discount_price'">
                        <el-input v-model="row[propname]" :min="1" type="number" @change="handlerInput({key:'discount',val:row[propname],index:index})"></el-input>
                      </div>
                       <div v-if="propname === 'total_prices'">
                            <div>{{row[propname]}}</div>
                       </div>
                    </template>
                    <template #search_operate>
                        <el-table-column   min-width="200px" label="操作" fixed="right">
                          <template #default="scope">
                             <el-link  type="primary" :underline="false" @click="signUp(scope.row,scope.$index)" class="btn" >報名</el-link >
                              <el-popconfirm
                                  confirm-button-text="確認"
                                  cancel-button-text="NO"
                                  title="確認刪除該數據?"
                                   @confirm="confirmEvent"
                                >
                                  <template #reference>
                                <el-button type="danger" icon="Delete" @click="deleteProduct(scope.$index, scope.row)" circle  ></el-button >
                                </template>
                              </el-popconfirm>
                          </template>
                        </el-table-column>
                  </template>
              </ProTable>
</div>
</template>

<script setup>
import { ref, watch ,onMounted,computed,onDeactivated} from 'vue' 
import {elProps} from './index'
import {message} from '@/common/function.js'
const column = {
        name:'課程名稱',
        num:'數量',
        price:'單價',
        discount_id:'特別折扣',
        discount_price:'折扣價',
        total_prices:'金額'
}

const props = defineProps({
    list:Array,
    discountSelect:Object,
    student_id:[String,Number],
    course:Boolean,
    school_id:[String,Number],
})
// 數量，金額，單價
const handlerInput = (data)=>{
  console.log(data);
        emit('input', data)
}
// 折扣
const handlerSelect= (data)=>{
  console.log(data);
          if (Boolean(data.val)) {
          discountList.value.forEach((item, index) => {
            if (item.id === data.val) {
              data.item = item
            }
          })
        } else {
          data.item = null
        }
 emit('select',data)
}

const rowProduct = ref({})
const deleteProduct = (index,row)=>{
      rowProduct.value = row
}
const emit = defineEmits(['del_course','select','input','sign','delSign'])
const confirmEvent = () => {
   emit('del_course',rowProduct.value)
}
const signUp = async(row,index)=>{
  console.log(row,index);
  emit('sign',{row,index})
}
const delSign = (indexA, indexB)=>{
  emit('delSign',indexA, indexB)
}
const table = ref('')
const multiple = (index)=>{
  console.log(index);
let $table = table.value.multipleTableRef
        $table.toggleRowExpansion(tableData.value[index])
}  
const discountList = ref([])
discountList.value = props.discountSelect
watch(()=>props.discountSelect,(newval)=>{
discountList.value = newval
})

const tableData = ref([])
tableData.value = JSON.parse(JSON.stringify(props.list)) 
watch(()=>props.list,(newval)=>{
 tableData.value =JSON.parse(JSON.stringify(newval)) 
},{deep:true,immediate:true}
)

const tableRowClassNameB = (data)=> {
        if (data.row.type == '-1') {
          return 'hidden-row';
        }
        return '';
      }


defineExpose({
  multiple
})
</script>

<style lang='less'  scoped>
.btn{
  margin-right: 20px;
}
/deep/ .el-table .hidden-row {
    display: none;
  }
</style>